<template>
	<coachCustomize url="/pages/coach/student/student" @setHeight="setHeight" ref="coach">
		<view class="content">
			<!--学员管理-->
			<view class="search">
				<view class="left">
					<image src="../../../static/teacher/search.png" mode="widthFix" />
					<input type="text" @input="bindKeywordChange" placeholder="输入学员名字" />
				</view>
				<view class="right" :class="[isFilter ? 'fontColor' : '']" @click="handleFilter">筛选</view>
			</view>
			<view class="global-height"></view>
			<scroll-view @scrolltolower="scrolltolower" :style="{ height: scrollHeight + 'px' }" class="scroll" scroll-y>
				<view class="total-add">
					<view class="left">共{{this.studentList.length}}人</view>

					<navigator url="../add_trainee/add_trainee" hover-class="none" class="right">
						<image src="../../../static/teacher/add.png" mode="widthFix" />
						新增学员
					</navigator>
				</view>
				<view class="data-list">
					<view class="item" v-for="item in studentList">
						<image src="https://img1.baidu.com/it/u=2079104172,4101697250&fm=26&fmt=auto&gp=0.jpg" mode="widthFix" />
						<!-- <view class="btn">编辑</view> -->
						<view class="info">
							<view class="name">
								{{item.student_name}}
								<text class="text">会员：{{item.card_name}}</text>
							</view>
							<view class="text">剩余课时：{{item.residual_class_hour}}</view>
							<view class="text">报名时间：{{item.create_time}}</view>
							<view class="text">到期时间：{{item.due_time}}</view>
							<view class="text" v-if="equipment">装备：{{equipment}}</view>
						</view>
					</view>
				</view>
				<hint ref="hint"></hint>
			</scroll-view>
			<view class="filter" v-if="isFilter" :style="{ height: scrollHeight + 'px', bottom: 116 + 'rpx' }">
				<view class="bg" @click="isFilter = false"></view>
				<view class="filter-content">
					<view class="name">姓名</view>
					<view class="input"><input type="text" v-model="search.name" placeholder-class="i" placeholder="请输入姓名" /></view>

					<view class="name">手机号</view>
					<view class="input"><input type="number" v-model="search.phone" placeholder-class="i" placeholder="请输入手机号" /></view>

					<view class="name">分校</view>
					<view class="input"><input type="text" v-model="search.school" placeholder-class="i" placeholder="请输入分校" /></view>

					<view class="btns">
						<view class="btn" @click="handleReset">重置</view>
						<view class="btn" @click="handleSubmit">确定</view>
					</view>
				</view>
			</view>
		</view>
	</coachCustomize>
</template>

<script>
import coachCustomize from '@/components/coach-customize/coach-customize.vue';
export default {
	components: {
		coachCustomize
	},
	data() {
		return {
			scrollHeight: 0,
			search: {
				name: '',
				phone: '',
				school: ''
			},
			isFilter: false,
			studentList: [],
			keyword: ''
		};
	},
	
	mounted() {
		this.getStudentList();
	},
	onReady() {
		//this.$refs.hint.setStatus('loading');
	},
	methods: {
		
		//搜索
		bindKeywordChange: function(e) {
		    this.keyword = e.target.value;
			this.getStudentList();
		},
		
		//获取签到列表
		getStudentList: function(){
			const teacher = uni.getStorageSync('teacher');
			uni.request({
				url: this.websiteUrl + '/app/getStudentListByShopId', 
				data: {
					shopId:teacher.shopId,
					keyword:this.keyword,
				},
				success: (res) => {
					this.studentList = res.data.studentList;
				}
			}); 
		},
		
		/**
		 * 获取可用容器高度
		 * @param {Object} data
		 */
		setHeight(data) {
			this.$sys.getBoundingClientRect('.search').then(e => {
				this.scrollHeight = data - e.height;
			});
		},
		scrolltolower() {
			console.log('数据加载');
		},
		/**
		 * 筛选确定
		 */
		handleSubmit() {
			this.$sys.showToast({
				title: '升级中'
			});
		},
		/**
		 * 筛选重置
		 */
		handleReset() {
			this.search = {
				name: '',
				phone: '',
				school: ''
			};
		},
		/**
		 * 筛选点击
		 */
		handleFilter() {
			if (this.isFilter) {
				this.isFilter = false;
			} else {
				this.isFilter = true;
			}
		}
	}
};
</script>

<style lang="scss">
.content {
	padding: 0;
}
.filter {
	width: 100%;
	position: fixed;
	right: 0px;
	bottom: 0px;
	z-index: 3;
	.bg {
		position: absolute;
		width: 100%;
		height: 100%;
		left: 0px;
		top: 0px;
		z-index: 1;
		background: rgba(0, 0, 0, 0.5);
	}
	.filter-content {
		position: absolute;
		width: 90%;
		height: 100%;
		top: 0px;
		right: 0px;
		z-index: 2;
		padding-top: $base-interval;
		background: $bg-color-white;
		.name {
			color: $text-color-nine;
			padding: 0px $base-interval;
		}
		.input {
			padding: 0px $base-interval;
			height: 64rpx;
			border-radius: 8rpx;
			margin-bottom: $lg-interval;
			margin-top: $sm-interval;
			@extend .flex-space-between-center;
			input {
				width: 95%;
				height: 100%;
				padding-left: $base-interval;
				background: #f8f9f9;
			}
			.i {
				color: $text-color-nine;
			}
		}
		.btns {
			position: absolute;
			left: 0px;
			bottom: 30rpx;
			width: 100%;
			height: 100rpx;
			@extend .flex-space-between-center;
			border-top: 1rpx solid #f8f8f8;
			.btn {
				line-height: 100rpx;
				width: 50%;
				text-align: center;
				&:last-child {
					color: #ffffff;
					background-color: $main-color;
				}
			}
		}
	}
}
.search {
	@extend .flex-space-between-center;
	flex-wrap: nowrap;
	padding: $base-interval;
	background: $bg-color-white;
	.left {
		height: 64rpx;
		background: #f2f3f5;
		border-radius: 32rpx;
		flex-shrink: 1;
		width: 100%;
		@extend .flex-space-between-center;
		justify-content: flex-start;
		padding: 0px $base-interval;
		flex-wrap: nowrap;
		image {
			width: 30rpx;
			flex-shrink: 0;
			margin-right: $sm-interval;
		}
		input {
			flex-shrink: 1;
			width: 100%;
		}
	}
	.right {
		flex-shrink: 0;
		width: 100rpx;
		text-align: center;
		line-height: 64rpx;
		color: $text-color-six;
		margin-right: -1 * $base-interval;
	}
	.fontColor {
		color: $main-color;
	}
}
.scroll {
	padding: 0px $base-interval;
	background: #f8f9f9;
	.total-add {
		@extend .flex-space-between-center;
		.left {
			color: $text-color-six;
			padding: $base-interval 0px $sm-interval;
		}
		.right {
			@extend .flex-space-between-center;
			color: $main-color;
			padding: $base-interval 0px $sm-interval;

			image {
				width: 28rpx;
				margin-right: 10rpx;
			}
		}
	}
	.data-list {
		margin-bottom: -1 * $base-interval;
		.item {
			background-color: $bg-color-white;
			@extend .flex-space-between-center;
			padding: $base-interval;
			border-radius: $border-radius-base;
			align-items: flex-start;
			justify-content: flex-start;
			flex-wrap: nowrap;
			position: relative;
			margin-bottom: $base-interval;
			image {
				width: 88rpx;
				margin-right: $base-interval;
				flex-shrink: 0;
				border-radius: $border-radius-circle;
			}
			.info {
				flex-shrink: 1;
				width: 100%;
				.name {
					color: $text-color-black;
					@extend .flex-space-between-center;
					font-weight: 600;
					font-size: $font-size-lg;
					.text {
						font-weight: 500;
						font-size: $font-size-base;
					}
					margin-bottom: $sm-interval;
				}

				.text {
					color: $text-color-nine;

					margin-bottom: $sm-interval;
					&:last-child {
						margin-bottom: 0px;
					}
				}
			}
			.btn {
				width: 96rpx;
				line-height: 52rpx;
				border-radius: 8rpx;
				text-align: center;
				position: absolute;
				right: $base-interval;
				bottom: $base-interval;
				color: $text-color-three;
				z-index: 3;
				border: 1px solid #d0d0d0;
			}
		}
	}
}
</style>
